<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="../commonCSS/commonInitialize.css" />
	<link rel="stylesheet" href="../commonCSS/htmlFontSize.css" />
	<link rel="stylesheet" href="../commonCSS/commonDisplayFlex.css" />
	<title>Document</title>
</head>
<body>
	<style type="text/css">
		#letter-code-div {
			width: 3.6rem;
			height: 1.4rem;
			cursor: pointer;
			line-height: 1.4rem;
			text-align: center;
			padding: 0.05rem;
			box-sizing: border-box;
			background: rgba(242, 242, 242, 0.8);
		}
		.letter-code {
			flex: 1;
			height: 100%;
			
			text-decoration: line-through;
		}
	</style>
	<div id="letter-code-div" class="display-flex flex-justify-center flex-align-items-center">
		<div class="letter-code"></div>
		<div class="letter-code"></div>
		<div class="letter-code"></div>
		<div class="letter-code"></div>
	</div>
	<div class="submit-btn-div"><input type="button" value="点 击 登 录" /></div>
	<script type="text/javascript">
		let letterCode = document.getElementsByClassName("letter-code");
		let textColor = 0;
		let skewAngle = 0;
		let fontSize1 = 0;
		let colors = ["green", "red", "pink", "purple", "orange", "#0495fd"];
		let fontSize2 = parseFloat(getComputedStyle(letterCode[0], null).getPropertyValue("height"));
		let strs = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
		createValidCode();
		letterCode[0].parentElement.addEventListener("click", function() {
			createValidCode();
		});
		
		
		function createValidCode() {
			for (let i = 0; i < letterCode.length; i++) {
				textColor = colors[Math.ceil(Math.random() * 5)];
				skewAngle = ` skewX(${Math.random() * 30}deg) skewY(${Math.random() * 30}deg)
				 rotate(${(Math.random() * -30) + (Math.random() * 30)}deg)
				`;
				fontSize1 = fontSize2 / 2;
				letterCode[i].style.color = textColor;
				letterCode[i].style.fontSize = fontSize1 + "px";
				letterCode[i].style.transform = skewAngle;
				letterCode[i].innerHTML = strs[Math.ceil(Math.random() * (strs.length - 1))];
				
			}
		}
		
	</script>
</body>
</html>